<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE HTML>
<html style="height: 100%;">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>登录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Free HTML5 Website Template by GetTemplates.co" />
    <meta name="keywords" content="free website templates, free html5, free template, free bootstrap, free website template, html5, css3, mobile first, responsive" />
    <meta name="author" content="GetTemplates.co" />

    <!-- Facebook and Twitter integration -->
    <meta property="og:title" content=""/>
    <meta property="og:image" content=""/>
    <meta property="og:url" content=""/>
    <meta property="og:site_name" content=""/>
    <meta property="og:description" content=""/>
    <meta name="twitter:title" content="" />
    <meta name="twitter:image" content="" />
    <meta name="twitter:url" content="" />
    <meta name="twitter:card" content="" />

    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet">

    <!-- Animate.css -->
    <!-- Animate.css -->
    <link rel="stylesheet" href="${ctx}/assets/layouts/css/animate.css">
    <!-- Icomoon Icon Fonts-->
    <link rel="stylesheet" href="${ctx}/assets/layouts/css/icomoon.css">
    <!-- Themify Icons-->
    <link rel="stylesheet" href="${ctx}/assets/layouts/css/themify-icons.css">
    <!-- Bootstrap  -->
    <link rel="stylesheet" href="${ctx}/assets/layouts/css/bootstrap.css">

    <!-- Magnific Popup -->
    <link rel="stylesheet" href="${ctx}/assets/layouts/css/magnific-popup.css">
    <!-- Owl Carousel  -->
    <link rel="stylesheet" href="${ctx}/assets/layouts/css/owl.carousel.min.css">
    <link rel="stylesheet" href="${ctx}/assets/layouts/css/owl.theme.default.min.css">

    <!-- Theme style  -->
    <link rel="stylesheet" href="${ctx}/assets/layouts/css/style.css">

    <!-- Modernizr JS -->
    <script src="${ctx}/assets/layouts/js/modernizr-2.6.2.min.js"></script>
    <!-- FOR IE9 below -->
</head>
<style>
    .gtco-container {
        margin-top: -1em;
    }
</style>
<body style="height: 100%;">
<div id="page1" style="height: 100%;">

    <!-- <div class="page-inner"> -->
    <nav class="gtco-nav" role="navigation">
        <div class="gtco-container">

            <div class="row">
                <div class="col-sm-4 col-xs-12">
                    <div id="gtco-logo"><label style="color: white;font-weight: 300">登录</label></div>
                </div>
            </div>
        </div>
    </nav>

    <header id="gtco-header" class="gtco-cover gtco-cover-md" role="banner" style="background-image: url(${ctx}/assets/layouts/images/img_bg_1.jpg)" data-stellar-background-ratio="0.5">
        <div class="overlay"></div>
        <div class="gtco-container">
            <div class="row">
                <div class="col-md-12 col-md-offset-0 text-left">
                    <div class="row row-mt-15em" style="margin-top: 3em;">
                        <div class="col-md-4 col-md-push-1 animate-box" data-animate-effect="fadeInRight">
                            <div class="form-wrap">
                                <div class="tab">
                                    <div class="tab-content">
                                        <div class="tab-content-inner active" data-content="signup">
                                            <div id="error-message" style="color: red;margin-bottom: 10px;"></div>
                                            <h3 class="cursive-font">用户信息</h3>
                                            <form id="login-form" method="post">
                                                <div class="row form-group">
                                                    <div class="col-md-12">
                                                        <input type="text" id="phone" name="phone" class="form-control" placeholder="手机号"
                                                               data-rule-required="true" data-msg-required="请输入手机号"
                                                               data-rule-number="true" data-msg-number="手机号格式不正确"
                                                               data-rule-minlength="11" data-msg-minlength="手机号格式不正确"
                                                               data-rule-maxlength="11" data-msg-maxlength="手机号格式不正确">
                                                    </div>
                                                </div>
                                                <div class="row form-group">
                                                    <div class="col-md-12">
                                                        <input type="password" id="password" name="password" class="form-control" placeholder="密码"
                                                               data-rule-required="true" data-msg-required="请输入密码"
                                                               data-rule-minlength="6" data-msg-minlength="密码至少为六位">
                                                    </div>
                                                </div>
                                                <div class="row form-group">
                                                    <div class="col-md-12">
                                                        <a style="color: white!important;" href="javascript:;" id="submit_register" onclick="login()" class="btn btn-primary btn-block">登录</a>
                                                    </div>
                                                </div>
                                            </form>
                                            <div class="row form-group">
                                                <div class="col-md-12">
                                                    <a href="javascript:window.location.href='${ctx}/app/register'">注册</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
</div>
<!-- jQuery -->
<script src="${ctx}/assets/layouts/js/jquery.min.js"></script>
<script src="${ctx}/assets/layouts/js/jquery.waypoints.min.js"></script>
<script src="${ctx}/assets/layouts/js/moment.min.js"></script>
<script src="${ctx}/assets/layouts/js/owl.carousel.min.js"></script>
<script src="${ctx}/assets/layouts/js/main.js"></script>
<script src="${ctx}/assets/pages/scripts/app.js"></script>
<script src="${ctx}/assets/global/plugins/jquery-validation/js/jquery.validate.js" type="text/javascript"></script>
<script>
    $(function () {
        // 验证手机号是否已被注册
        $( "#login-form" ).validate({
            rules: {
                phone: {
                    remote: {
                        url: "${ctx}/app/check/login",
                        type: "post",
                        async: false,           // ！设置为同步
                        data: {
                            data: function () {
                                return $('#phone').val()
                            }
                        }
                    }
                }
            },
            messages: {
                phone: {
                    remote: "该手机号未注册"
                }
            }
        });
//        $("#login-form").validate();
    });

    // 登录
    function login() {
        var check = $("#login-form").validate().form();
        if (!check) {
            return;
        }
        var data = {
            phone: $("#phone").val(),
            password: $("#password").val()
        }
        ajaxPostWithJson("${ctx}/app/login_sign", data, function (LoginModel) {
            if (LoginModel.hasError) {
                $("#error-message").html(LoginModel.errorMessage);
            } else {
                window.location.href='${ctx}/app/sign?id=' + LoginModel.userId;
            }
        },function (msg) {
            $("#error-message").html("登录失败，请您稍后重试");
        });
    }
</script>

</body>
</html>

